
import React from 'react';
import { Icon, Menu, message } from 'antd';
import RenderMaterialItem from '../common/commonRender/renderMaterialItem';
import TitleItem from '../../components/TitleItem';
import UploadModal from '../../components/UploadModal';
import CustomModal from '../../components/UploadModal/CustomModal';

class ProjectMaterial extends React.Component {

    state = {
        needReflesh: 'false', // 新增文件夹成功之后，用于PickerModal内部刷新文件夹列表
    }

    renderMenu() {
        const { isLawyer } = this.props;
        return (
            <Menu onClick={({ key }) => this[key]()}>
                <Menu.Item key="showUploadModal">上传文件</Menu.Item>
                {isLawyer && <Menu.Item key="showCustomModal">自定义文件夹</Menu.Item>}
            </Menu>
        );
    }

    showUploadModal = () => {
        this.setState({ showModal: true })
    }

    showCustomModal = () => {
        this.setState({ customModal: true })
    }

    openModal = () => {
        if (this.props.create) {
            message.warn('请在保存项目后上传资料');
        }
    }

    onUploadResult = async (allRes, callback) => {
        // 调用组件内部方法刷新
        this.renderMaterialItem.refleshFile(callback);
    }

    // 新建自定义文件夹和修改文件夹可见状态都要触发更新
    refleshFolder = () => {
        this.setState({ needReflesh: Math.random() })
    }

    render() {
        const { detailData, data = {}, create, isShowInSlider, col = 2, projectState, activeStageIndex } = this.props;
        const { showModal, customModal, needReflesh } = this.state;
        return (
            <div>
                <TitleItem
                    title={'资料'}
                    onClick={this.openModal}
                    // icon={!data.iscomplete && (
                    //     <Dropdown overlay={this.renderMenu()} disabled={create}>
                    //         <Icon type="plus" className="mainColor" />
                    //     </Dropdown>
                    // )}
                    icon={!data.iscomplete && <Icon type="plus" className="mainColor" onClick={this.showUploadModal} />}
                />
                <RenderMaterialItem
                    ref={d => this.renderMaterialItem = d}
                    col={col}
                    isShowInSlider={isShowInSlider}
                    activeStageIndex={activeStageIndex}
                    refleshFolder={this.refleshFolder}
                    create={create}
                    files={data.files || []}
                    detailData={detailData}
                    stage={data}
                    projectState={projectState}
                />
                {create ? null : (
                    <UploadModal
                        type={'1'}
                        needReflesh={needReflesh}
                        projectid={detailData.projectid}
                        projecttype={detailData.projecttype}
                        stageid={data.stageid}
                        show={showModal}
                        onUploadResult={this.onUploadResult}
                        onCancel={() => this.setState({ showModal: false })}
                    />
                )}
                {create ? null : (
                    <CustomModal
                        projectid={detailData.projectid}
                        stageid={data.stageid}
                        show={customModal}
                        onSuccess={this.refleshFolder}
                        onCancel={() => this.setState({ customModal: false })}
                    />
                )}
            </div>
        )
    }
}

export default ProjectMaterial